import React, { Component } from 'react'
import GoBack from '@/components/TheGoBack'
import '@/views/commodity/style/style.less'
import { Table } from 'antd'
import TheImage from '@/components/TheImage'
import { apiStandDetailByOrdeId } from '@/request/cashier'
import _ from 'lodash'

export default class OrderChargebackDetail extends Component {
  state = {
    basicData: [],
    columns: [
      {
        title: "商品信息",
        width: 600,
        render: (text, record) => {
          let style = {
            width: 200,
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis'
          }
          return (
            <div style={{ display: "flex", alignItems: "center" }}>
              <TheImage
                src={record.productImage}
                width={100}
              />
              <div style={{ margin: "0 10px" }}>{record.productName}</div>
              <div>{record.sku}</div>
            </div>
          );
        },
      },
      {
        title: "单价",
        dataIndex: "orderPrice",
        key: "orderPrice",
        render: (text) => <React.$price price={text || 0} />,
      },
      {
        title: "退款数量",
        dataIndex: "returnProductCount",
        key: "returnProductCount",
        render: (text) => text || 0,
      },
      {
        title: "合计",
        dataIndex: "returnPrice",
        key: "returnPrice",
        render: (text, record) => {
          return <div>
            <React.$price price={text || 0} />
          </div>
        },
      },
    ],
    dataSource: [],
    serviceData: [],
    serviceColumns: [
      {
        title: '服务名称',
        dataIndex: 'productName',
        key: 'productName'
      },
      {
        title: '价格',
        dataIndex: 'orderPrice',
        key: 'orderPrice',
        render: (text, record) => {
          return <React.$Price price={text || 0} />
        }
      },
    ],
    otherColumns: [
      {
        title: '备注',
        dataIndex: 'orderProductRemark',
        key: 'orderProductRemark'
      },
      {
        title: '金额',
        dataIndex: 'orderPrice',
        key: 'orderPrice',
        render: (text, record) => {
          return <React.$Price price={text || 0} />
        }
      }
    ]
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    const { id } = this.props.match.params
    let res = await apiStandDetailByOrdeId({ orderId: id })
    if (res.data && res.code === 0) {
      let data = res.data
      let basicData = [
        {
          text: '退单编号',
          value: data.returnCode
        },
        {
          text: '退款时间',
          value: data.createTime
        },
        {
          text: '用户昵称',
          value: data.orderMemberName || '无'
        },
        {
          text: '退款人员',
          value: data.cashierName
        },
        {
          text: '退款方式',
          value: data.payWay === '混合支付' ? '混合退回' : data.payWay
        },
        {
          text: '订单金额',
          value: <React.$Price color="#7F7F7F" price={data.orderPayPrice} />
        },
        {
          text: '退款金额',
          value: <React.$Price color="#7F7F7F" price={data.returnTotalPrice} />
        }
      ]
      let basicPayPrice = _.map(data.payData, (v, k) => {
        return {
          text: k,
          value: <React.$Price color="#7F7F7F" price={v} />
        }
      })
      let integralData = [
        {
          text: '退还积分',
          value: _.toNumber(data.returnIntegral).toLocaleString()
        }
      ]
      basicData = _.concat(basicData, basicPayPrice, integralData)
      let dataSource = data.standProductList.map(v => {
        let productSkuJson = JSON.parse(v.productSkuJson)
        let sku = productSkuJson.skuAttribute.map(k => k.product_value)
        return {
          ...v,
          sku
        }
      })
      let serviceData = data.standServiceList
      let otherData = data.standOtherList
      this.setState({
        basicData,
        dataSource,
        serviceData,
        otherData
      })
    }
  }
  render() {
    const { basicData, columns, dataSource, serviceData, serviceColumns, otherColumns, otherData } = this.state
    return (
      <div className="p-layout-box commodity-list-detail">
        <GoBack history={this.props.history} title={"订单详情"} />
        <div className="detail-content">
          <div className="commodity-card">
            <div className="title">退单信息</div>
            <div className="content basic" style={{ padding: '20px 60px' }}>
              {basicData.map((v, i) => {
                return (
                  <div>
                    <p style={{ minWidth: 90 }}>{v.text}:</p>
                    <div>{v.value}</div>
                  </div>
                );
              })}
            </div>
          </div>
          {!_.isEmpty(dataSource) && <div className="commodity-card">
            <div className="title">退款商品列表</div>
            <div className="content">
              <Table
                dataSource={dataSource}
                columns={columns}
                pagination={false}
              />
            </div>
          </div>}
          {!_.isEmpty(serviceData) && <div className="commodity-card">
            <div className="title">退款服务列表</div>
            <div className="content">
              <Table
                dataSource={serviceData}
                columns={serviceColumns}
                pagination={false}
              />
            </div>
          </div>}
          {!_.isEmpty(otherData) && <div className="commodity-card">
            <div className="title">其他服务</div>
            <div className="content">
              <Table
                dataSource={otherData}
                columns={otherColumns}
                pagination={false}
              />
            </div>
          </div>}
        </div>
      </div>
    )
  }
}
